<template>
  <div>
    <el-dialog
      :title="title"
      v-model="showDialog"
      :before-close="close"
      @close="close"
      @open="openDialog"
      top="160px"
      width="800px"
      append-to-body
    >
      <!-- S 完善属性 -->
      <el-form
        ref="formRef"
        :model="currentFile"
        :rules="rules"
        label-width="120px"
        class="demo-file"
      >
        <el-form-item label="文档原目录" class="code">
          <el-input disabled v-model="currentFile.categoryName" />
        </el-form-item>
        <el-form-item :label="actionText + '位置'" prop="fileCategoryId">
          <tree-select
            ref="treeSelect"
            v-model:value="currentFile.toId"
            :options="cateList"
            placeholder="请选择"
            :objMap="{
              value: 'id',
              label: 'categoryName',
              children: 'children',
            }"
          />
        </el-form-item>
      </el-form>
      <!-- E 完善属性 -->
      <div class="dialog-footer">
        <el-button type="primary" size="small" @click="submit">
          提交
        </el-button>
        <el-button size="small" @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="fileActionDialog">
import { formatDate } from '@/utils'
import { submitForm } from '../index.js'
import { getCategoryListHasViewAndUpload } from '@/api/fileManager'
import { handleTree } from '@/utils'
const { proxy } = getCurrentInstance()
const title = ref('文档移动')
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  currentFile: {
    type: Object,
    default: () => {
      return {}
    },
  },
  type: {
    type: Number,
    default: 1, // 移动-1 引用-2
  },
})
const emits = defineEmits(['getList', 'close'])
const formInfo = ref({
  list: [
    {
      componentType: 'input',
      label: '文档原目录',
      value: 'categoryName',
    },
    {
      componentType: 'treeSelect',
      label: '文档目录',
      value: 'fileCategoryId',
      objMap: {
        value: 'id',
        label: 'categoryName',
        children: 'children',
      },
      selectData: [],
    },
  ],
})
const rules = reactive({
  fileCategoryId: [
    {
      required: true,
      message: '请选择目录',
      trigger: 'change',
    },
  ],
})
const showDialog = computed({
  get() {
    return props.open
  },
  set(val) {
    emits('update:open', val)
  },
})
const actionText = ref('移动')
watch(
  () => props.type,
  (val) => {
    let text = val === 1 ? '移动' : '引用'
    title.value = '文档' + text
    actionText.value = text
  },
  {
    immediate: true,
  }
)
watch(
  () => props.currentFile,
  (val) => {
    props.currentFile.fileCategoryIdTemp = val.fileCategoryId
  },
  { immediate: true }
)
function openDialog() {}
function close() {
  proxy.$refs.formRef.resetFields()
  emits('close')
}
function submit() {
  submitForm(proxy).then((res) => {
    if (res) {
      const parmas = {
        id: props.currentFile.id,
        fromId: props.currentFile.fileCategoryIdTemp,
        toId: props.currentFile.toId,
      }
      emits('submit', { type: props.type, parmas })
    }
  })
}

const cateList = ref(undefined) // 文档目录
/** 获取类别下拉树结构 */
function _getCategoryListSelect() {
  getCategoryListHasViewAndUpload().then((response) => {
    let _treeList = proxy.$fn.deepClone(response.data)
    // 不用移动引用自己
    _treeList.forEach((element, index) => {
      if (element.id === props.currentFile.fileCategoryId) {
        _treeList[index].disabled = true
      }
      cateList.value = handleTree(_treeList, 'id')
    })
    //cateList.value = handleTree(response.data, 'id')
  })
}
_getCategoryListSelect()
</script>
<style lang="scss"></style>
<style scoped lang="scss">
:deep(.el-tree-select) {
  width: 100%;
}
.demo-file {
  width: 90%;
  :deep(.el-input),
  :deep(.el-input__inner) {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
  .code {
    .code-head {
      flex: 1;
      width: 100%;
      margin-right: 6px;
      white-space: nowrap;
    }
    :deep(.el-form-item__content) {
      display: flex !important;
    }
  }
}
.visible {
  display: none;
}
.upload-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin: 45px 0 0 0;
}
</style>
